<template>
    <div class="bx-editor">
        <van-nav-bar title="信息编辑" left-text="返回" left-arrow border fixed @click-left="$router.go(-1)"/>
        <div style="height:50px"></div>
        <div class="title">
            基本信息
        </div>
        <div>
            <van-cell-group>
                <van-field v-model="name" label="姓名" placeholder="请填写姓名" size="large"/>
                <div class="radio">
                    <div>性别</div>
                    <van-radio-group v-model="sex">
                        <van-radio :name="'男'" checked-color="#366cb3">男</van-radio>
                        <van-radio :name="'女'" checked-color="#366cb3">女</van-radio>
                    </van-radio-group>
                </div>

                <van-field readonly clickable  label="出生日期" :value="$formatDateTime(birthday, 'yyyy-MM-dd')"
                           placeholder="--请选择--" @click="timePopupShow1 = true"/>
                <van-popup v-model="timePopupShow1" position="bottom">
                    <!-- 123 -->
                    <!-- :min-date="new Date(1920, 0, 1)" -->
                    <van-datetime-picker :min-date="minDate" :max-date="maxDate" v-model="timeVal1" type="date"
                                         @cancel="timePopupShow1 = false" @confirm="timePopupShow1 = false"/>
                </van-popup>

                <van-field v-model="id_card" label="身份证号" placeholder="请填写身份证号" size="large" />
                <van-field v-model="mobile" label="联系方式" placeholder="" size="large" />
                <!--                <van-field readonly clickable  label="通讯地址" :value="`${province}-${city}-${area}`" placeholder="&#45;&#45;请选择&#45;&#45;" @click="addressPopupShow = true" />-->
                <van-popup v-model="addressPopupShow" position="bottom">
                    <van-area ref="area" value="110000" :area-list="areaList" @confirm="confirmAddress"
                              @cancel="addressPopupShow = false"/>
                </van-popup>
                <van-field v-model="address" label="详细地址" placeholder="" size="large" />
                <!--                <van-field readonly clickable  label="所属行业" :value="industryName" placeholder="&#45;&#45;请选择&#45;&#45;" @click="industryPickerShow = true" />-->
                <van-popup v-model="industryPickerShow" position="bottom">
                    <van-picker show-toolbar :columns="industrySource" :default-index="industryIndex" value-key="name"
                                @cancel="industryPickerShow = false" @confirm="onIndustry"/>
                </van-popup>
                <!-- <van-field readonly clickable  label="合作客户类型" :value="channelName" placeholder="--请选择--" @click="clientPicker = true" /> -->
                <!-- <van-popup v-model="clientPicker" position="bottom">
                    <van-picker show-toolbar :columns="channelSource" :default-index="channelIndex" value-key="name" @cancel="clientPicker = false" @confirm="onClient" />
                </van-popup> -->

                <van-field v-model="education" label="前置学历" placeholder="" size="large" />

                <!-- <van-field readonly clickable  label="所属业务员" :value="businessMan" placeholder="--请选择--" @click="salesmanPicker = true" />
                <van-popup v-model="salesmanPicker" position="bottom"></van-popup> -->
                <!-- <checkboxGroup :selectType="0" :labelText="'选择业务专员'" :nameVal="salesmanName" :dataSource="salesmanSource" :dataVal="salesmanValArr" @selectResult="selectResult" v-if="LoadComplete" /> -->

                <div class="radio">
                    <div>是否产生佣金</div>
                    <van-radio-group v-model="is_brokerage">
                        <van-radio :name="1" checked-color="#366cb3">是</van-radio>
                        <van-radio :name="0" checked-color="#366cb3">否</van-radio>
                    </van-radio-group>
                </div>
                <van-field v-model="brokerage" v-if="is_brokerage == 1 " label="佣金金额" placeholder="" size="large"
                           />
                <van-field v-model="remark" rows="3" autosize label="特殊要求备注" type="textarea" placeholder="请输入特殊要求备注"
                           show-word-limit/>
                <van-field v-model="cooperation" rows="3" autosize label="可延伸合作机会" type="textarea"
                           placeholder="请输入可延伸的合作机会" show-word-limit/>
            </van-cell-group>
        </div>
        <div class="title">
            发票信息
        </div>
        <div>
            <van-cell-group>
                <div class="radio">
                    <div>是否允许后付款</div>
                    <van-radio-group v-model="lag_pay">
                        <van-radio :name="1" checked-color="#366cb3">是</van-radio>
                        <van-radio :name="0" checked-color="#366cb3">否</van-radio>
                    </van-radio-group>
                </div>
                <div class="radio">
                    <div>付款方式</div>
                    <van-radio-group v-model="payment_type">
                        <van-radio v-for="(item, index) in payTypeSource" :key="index" :name="item.id"
                                   checked-color="#366cb3">{{item.name}}
                        </van-radio>
                    </van-radio-group>
                </div>

                <van-field readonly clickable  label="发票类型" :value="invoiceTypeName" placeholder="--请选择--"
                           @click="invoicePickerShow = true"/>
                <van-popup v-model="invoicePickerShow" position="bottom">
                    <van-picker show-toolbar :columns="invoiceTypeSource" :default-index="invoiceTypeIndex"
                                value-key="name" @cancel="invoicePickerShow = false" @confirm="onInvoice"/>
                </van-popup>

                <van-field readonly clickable  label="开票类型" :value="invoiceClassName" placeholder="--请选择--"
                           @click="invoiceClassPickerShow = true"/>
                <van-popup v-model="invoiceClassPickerShow" position="bottom ">
                    <van-picker show-toolbar :columns="invoiceClassSource" :default-index="invoiceClassIndex"
                                value-key="name" @cancel="invoiceClassPickerShow = false" @confirm="onMakeInvoice"/>
                </van-popup>

                <van-field readonly clickable  label="发票名称" :value="invoiceNameName" placeholder="--请选择--"
                           @click="invoiceNameShow = true"/>
                <van-popup v-model="invoiceNameShow" position="bottom">
                    <van-picker show-toolbar :columns="invoiceNameSource" :default-index="invoiceNameIndex"
                                value-key="name" @cancel="invoiceNameShow = false" @confirm="onInvoiceName"/>
                </van-popup>
                <van-field v-if="invoiceNameName == '自定义'" v-model="new_invoice_name" label="自定义发票名称" placeholder=""
                           size="large" />
                <van-field v-model="invoice_company" label="公司名称" placeholder="" size="large" />
                <van-field v-model="invoice_tax_code" label="税号" placeholder="" size="large" />
                <van-field v-model="invoice_address" label="公司地址" placeholder="" size="large" />
                <van-field v-model="invoice_mobile" label="公司联系电话" placeholder="" size="large" />
                <van-field v-model="invoice_bank" label="开户行" placeholder="" size="large" />
                <van-field v-model="invoice_bank_code" label="开户账号" placeholder="" size="large" />
                <div class="radio">
                    <div>是否见票付款</div>
                    <div style="flex-wrap: nowrap">
                        <van-radio-group v-model="invoice_pay">
                            <van-radio :name="1" checked-color="#366cb3">是</van-radio>
                            <van-radio :name="0" checked-color="#366cb3">否</van-radio>
                        </van-radio-group>
                    </div>
                </div>
                <van-field v-model="invoice_remark" rows="3" autosize label="开票备注" type="textarea" placeholder="请输入备注"
                           show-word-limit/>
            </van-cell-group>
        </div>

        <div class="foot-btn">
            <div class="blue-btn" @click="pushInfo">保存</div>
            <!-- <div class="red-btn">取消</div> -->
        </div>

    </div>
</template>

<script>
    import AddressEdit from '../../../plugins/area'
    import checkboxGroup from '@/components/checkboxGroup.vue'

    export default {
        name: "jyEditor",
        components: {
            checkboxGroup, checkboxGroup
        },
        data() {
            return {
                minDate: new Date(1920, 0, 1),
                maxDate: new Date(2030, 0, 1),

                LoadComplete: false,
                userId: '',

                salesmanValue: '',
                salesmanPicker: false,

                salesmanName: '',
                salesmanValArr: [],
                salesmanSource: [],


                invoiceTypeName: '',
                invoiceTypeIndex: 0,
                invoicePickerShow: false,
                invoiceTypeSource: [],

                invoiceClassName: '',
                invoiceClassIndex: 0,
                invoiceClassPickerShow: false,
                invoiceClassSource: [],

                invoiceNameName: '',
                invoiceNameIndex: 0,
                invoiceNameShow: false,
                invoiceNameSource: [], //发票名称

                payTypeSource: [], // 付款方式
                moneyRadio: '1',
                isVoucherRadio: '1',
                paymentRadio: '1',
                mask: '',

                addressPopupShow: false,
                site: '',
                areaList: AddressEdit,


                name: '', //合作客户名称
                sex: '男', //性别
                id_card: '', //性别

                timeField1: false,
                timeVal1: new Date(),
                birthday: new Date(),// 出生日期
                timePopupShow1: false,
                mobile: '', //联系方式
                province: '', //省
                provinceCode: '', //省
                city: '', //市
                cityCode: '', //市
                area: '', //区
                areaCode: '', //区
                address: '', //详细地址
                industryIndex: '', //所属行业
                industryName: '', //所属行业
                industryPickerShow: false,
                industrySource: [
                    {
                        name: ''
                    }
                ],

                channelIndex: 0,
                channelName: 0,
                clientPicker: false,
                channelSource: [
                    {
                        name: ''
                    }
                ], //客户类型


                education: '', //前置学历
                salesman_id: '', //共享业务员（非必填）
                is_brokerage: 0, //是否产生佣金
                brokerage: '', //佣金
                remark: '', //特殊要求备注
                cooperation: '', //可延伸合作机会
                lag_pay: 0, //是否允许后付款
                payment_type: 1, //付款方式
                need_invoice: '', //是否需要发票，1需要，0不需要
                invoice_type: '', //发票类型，1电子发票，2纸质发票
                invoice_class: '', //开票类型
                invoice_name: '', //发票名称
                new_invoice_name: '', //自定义发票名称
                invoice_company: '', //公司名称
                invoice_tax_code: '', //税号
                invoice_address: '', //公司地址
                invoice_mobile: '', //公司电话
                invoice_bank: '', //开户行
                invoice_bank_code: '', //开户账号
                invoice_pay: 0, //是否见票付款，1是，0否
                invoice_remark: '',//开票备注


                salesnameSource: [],
                value: '',
                students: [],
                showSelect: false,
                businessMan: [],

            }
        },
        methods: {
            getConfig() {
                let params = {
                    wx_member_id: localStorage.getItem('wx_member_id'),
                    token: localStorage.getItem('token'),
                    cate_id: this.$route.query.type,
                };
                this.$post("/api/member/get_config_info", params)
                    .then(res => {
                        if (res.code == 1) {
                            this.invoiceTypeSource = res.data.invoice_type // 发票类型
                            this.invoiceClassSource = res.data.invoice_class // 开票类型
                            this.invoiceNameSource = res.data.invoice_name // 发票名称
                            this.industrySource = res.data.industry //  所属行业
                            this.payTypeSource = res.data.payment_type //  付款方式
                            this.channelSource = res.data.channel //  付款方式


                            // 筛选 业务专员选中的选项
                            this.salesmanSource = res.data.salesname // 业务专员
                            let salesmanValArr = []
                            let salesmanNameArr = []
                            res.data.salesname.map((item, index) => {
                                if (item.selected) {
                                    salesmanValArr.push(item.value)
                                    salesmanNameArr.push(item.name)
                                }
                            })
                            this.salesmanValArr = salesmanValArr
                            this.salesmanName = salesmanNameArr.toString(',')


                            this.getInfo();
                        }
                    })
                    .catch(err => {
                    });
            },
            getInfo() {
                let params = {
                    wx_member_id: localStorage.getItem('wx_member_id'),
                    token: localStorage.getItem('token'),
                    cate_id: this.$route.query.type,
                };
                this.$post("/api/member/read", params)
                    .then(res => {
                        if (res.code == 1) {
                            this.userId = res.data.id //合作客户名称
                            this.name = res.data.name //合作客户名称
                            this.id_card = res.data.id_card //合作客户名称
                            this.sex = res.data.sex //合作客户名称
                            console.log(res.data.birthday)
                            console.log(new Date(res.data.birthday))
                            this.birthday = new Date(res.data.birthday) //合作客户名称
                            this.timeVal1 = new Date(res.data.birthday) //合作客户名称
                            this.mobile = res.data.mobile //联系方式
                            this.province = res.data.province //省
                            this.city = res.data.city //市
                            this.area = res.data.area //区
                            this.address = res.data.address //详细地址
                            // this.industry = res.data.industry //所属行业
                            //  付款方式
                            this.channelSource.map((item, index) => {
                                if (item.name == res.data.cooperation_name) {
                                    this.channelIndex = index
                                    this.channelName = item.name
                                }
                            })
                            //  所属行业
                            this.industrySource.map((item, index) => {
                                if (item.name == res.data.industry_name) {
                                    this.industryIndex = index
                                    this.industryName = item.name
                                }
                            })
                            // 发票类型
                            this.invoiceTypeSource.map((item, index) => {
                                console.log(res.data.invoice_type,'飞机迪斯科');
                                if (item.id == res.data.invoice_type) {
                                    this.invoiceTypeIndex = index
                                    this.invoiceTypeName = item.name
                                }
                            })
                            // 开票类型
                            this.invoiceClassSource.map((item, index) => {
                                if (item.id == res.data.invoice_class) {
                                    this.invoiceClassIndex = index
                                    this.invoiceClassName = item.name

                                }
                            })

                            // 发票名称
                            this.invoiceNameSource.map((item, index) => {
                                if (item == res.data.invoice_name) {
                                    this.invoiceNameIndex = index
                                    this.invoiceNameName = item
                                    // this.new_invoice_name = item

                                }
                            })

                            // this.invoice_type = res.data.invoice_type //发票类型
                            this.education = res.data.education //前置学历
                            this.salesman_id = res.data.salesman_id //共享业务员（非必填）
                            this.is_brokerage = Number(res.data.is_brokerage) //是否产生佣金
                            this.brokerage = res.data.brokerage //佣金
                            this.remark = res.data.remark //特殊要求备注

                            this.cooperation = res.data.cooperation //可延伸合作机会

                            this.lag_pay = res.data.lag_pay //是否允许后付款
                            this.payment_type = res.data.payment_type //付款方式
                            this.need_invoice = res.data.need_invoice //是否需要发票，1需要，0不需要
                            this.invoice_type = res.data.invoice_type //发票类型，1电子发票，2纸质发票
                            // this.invoice_class = res.data.invoice_class //开票类型
                            // this.invoice_name = res.data.invoice_name //发票名称
                            this.invoice_company = res.data.invoice_company //公司名称
                            this.invoice_tax_code = res.data.invoice_tax_code //税号
                            this.invoice_address = res.data.invoice_address //公司地址
                            this.invoice_mobile = res.data.invoice_mobile //公司电话
                            this.invoice_bank = res.data.invoice_bank //开户行
                            this.invoice_bank_code = res.data.invoice_bank_code //开户账号
                            this.invoice_pay = res.data.invoice_pay //是否见票付款，1是，0否
                            this.invoice_remark = res.data.invoice_remark //开票备注
                            this.$Toast.clear();
                            // console.log(this.areaList)


                            this.LoadComplete = true
                        }
                    })
                    .catch(err => {
                    });
            },
            pushInfo() {
                let params = {
                    token: localStorage.getItem('token'),
                    wx_member_id: localStorage.getItem('wx_member_id'),
                    id: this.userId,
                    cate_id: 2,

                    name: this.name, //合作客户名称
                    sex: this.sex, //性别
                    id_card: this.id_card, //身份证号
                    birthday: this.$formatDateTime(this.birthday, 'yyyy-MM-dd'), //出生日期
                    mobile: this.mobile, //联系方式
                    // province: this.province, //省
                    // city: this.city, //市
                    // area: this.area, //区
                    address: this.address, //详细地址

                    education: this.education,//前置学历
                    // salesman_id: this.salesmanValArr.toString(','),
                    is_brokerage: Number(this.is_brokerage), //是否产生佣金
                    brokerage: this.brokerage,//佣金
                    remark: this.remark, //特殊要求备注
                    cooperation: this.cooperation, //可延伸合作机会
                    lag_pay: this.lag_pay, //是否允许后付款
                    payment_type: this.payment_type, //付款方式
                    invoice_type: this.invoice_type,//发票类型，1电子发票，2纸质发票
                    invoice_class: this.invoiceClassSource[this.invoiceClassIndex].id, //开票类型
                    invoice_name: this.invoiceNameSource[this.invoiceNameIndex], //发票名称
                    new_invoice_name: this.new_invoice_name, //自定义发票名称
                    invoice_company: this.invoice_company,//公司名称
                    invoice_tax_code: this.invoice_tax_code, //税号
                    invoice_address: this.invoice_address, //公司地址
                    invoice_mobile: this.invoice_mobile, //公司电话
                    invoice_bank: this.invoice_bank, //开户行
                    invoice_bank_code: this.invoice_bank_code, //开户账号
                    invoice_pay: this.invoice_pay, //是否见票付款，1是，0否
                    invoice_remark: this.invoice_remark, //开票备注

                    // cooperation_classification: this.channelSource[this.channelIndex].id, //付款方式
                    // industry: this.industrySource[this.industryIndex].id, //所属行业


                    // need_invoice: this.need_invoice, //是否需要发票，1需要，0不需要
                };
                this.$post("/api/member/save", params)
                    .then(res => {
                        if (res.code == 1) {
                            setTimeout(() => {
                                this.$router.go(-1)
                            }, 1500);
                            this.$Toast(res.msg);
                        } else {
                            this.$Toast(res.msg);
                        }
                    })
                    .catch(err => {
                    });
            },
            // 所属行业
            onIndustry(value, index) {
                this.industryIndex = index;
                this.industryName = value.name
                this.industryPickerShow = false;
            },
            // 合作客户类型
            onClient(value, index) {
                this.channelIndex = index;
                this.channelName = value.name
                this.clientPicker = false;
            },
            // 合作客户类型
            onSalesman(value, index) {
                this.salesmanValue = value;
                this.salesmanPicker = false;
            },
            // 发票类型
            onInvoice(value, index) {
                this.invoiceTypeIndex = index;
                this.invoice_type = value.id;
                this.invoiceTypeName = value.name
                this.invoicePickerShow = false;
            },
            // 开票类型
            onMakeInvoice(value, index) {
                this.invoiceClassIndex = index;
                this.invoiceClassName = value.name
                this.invoiceClassPickerShow = false;
            },
            // 公司名称
            onInvoiceName(value, index) {
                this.invoiceNameIndex = index;
                this.invoiceNameName = value
                this.invoiceNameShow = false;
            },
            // 地址确认
            confirmAddress(value) {
                console.log(value);
                this.province = value[0].name
                this.provinceCode = value[0].code

                this.city = value[1].name
                this.cityCode = value[1].code

                this.area = value[2].name
                this.areaCode = value[2].code

                this.addressPopupShow = false
            },
            // 业务人员多选回调
            selectResult(type, title, Arr, val3) {
                if (type == 0) {
                    this.salesmanName = title
                    this.salesmanValArr = Arr
                }
                if (type == 1) {
                    this.customerName = title
                    this.customerValArr = Arr
                }
                if (type == 2) {
                    this.financeName = title
                    this.financeValArr = Arr
                }
                if (type == 3) {
                    this.compensateName = title
                    this.compensateValArr = Arr
                }
            },
        },
        created() {
            this.$Toast.loading({
                duration: 0, // 持续展示 toast
                message: '加载中...',
                forbidClick: true
            });

            this.getConfig();

        },
    }
</script>

<style scoped lang="less">
    .radio {
        display: flex;
        align-items: center;
        padding: 10px 15px;

        > div:nth-of-type(1) {
            width: 116px;
            font-size: 13px;
            color: #323233;
        }

        > div:nth-of-type(2) {
            font-size: 12px;
        }
    }

    .selects-box {
        display: flex;
        align-items: center;
        padding: 10px 10px;

        > div:nth-of-type(1) {
            width: 116px;
        }

        > div:nth-of-type(2) {
            border: 1px solid #dcdcdc;
            border-radius: 3px;
            flex: 1;
            height: 30px;
        }
    }

    .businessMan-box {
        /*height: 100px;*/
    }

    .foot-btn {
        padding-bottom: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 70px;
    }
</style>